<template>
    <div class="wrap">
        <div>
            <div class="wrap-card">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="110">
                    <Row>
                        <p class="product-hr-title">基本信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="商品名称" prop="ProName">
                                <i-input v-model="formItem.ProName" placeholder="请输入商品名称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="生产厂家" prop="FactoryID">
                                <Select v-model="formItem.FactoryID" filterable remote :remote-method="remoteMethod" :loading="Factoryloading">
                                    <Option v-for="(option, index) in FactoryList" :value="option.ID" :key="index">{{option.SupplierName}}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 7}">
                            <FormItem label="商品规格" prop="Spec">
                                <i-input v-model="formItem.Spec" placeholder="请输入商品规格"></i-input>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span:4}">
                            <FormItem label="保质期(天)" prop="ShelfLife">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,12)"
                                    v-model="formItem.ShelfLife"
                                    class="style-input"
                                    placeholder="请输入保质期"
                                />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="商品简称" prop="ShortName">
                                <i-input v-model="formItem.ShortName" placeholder="请输入商品简称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="商品分类" prop="categoriesList">
                                <Cascader :data="categoriesList" v-model="categoriesListValue" placeholder="请选择商品分类"></Cascader>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 3}">
                            <FormItem label="计价单位" prop="UnitBuy">
                                <!-- <i-input v-model="formItem.UnitBuy" placeholder="请输入进货单位"></i-input> -->
                                <AutoComplete v-model="formItem.UnitBuy" @on-search="remoteMethod11" placeholder="进货单位" v-if="isSelect">
                                    <Option v-for="item in UnitBuy" :value="item.UnitName" :key="item.UnitCode" @click.native="handleUnitBuy(item)">
                                        <div style="display: flex;justify-content: space-between;">
                                            <span class="demo-auto-complete-title">{{ item.UnitName }}</span>
                                        </div>
                                    </Option>
                                </AutoComplete>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 2}">
                            <FormItem prop="UnitSales" label class="aaa">
                                <AutoComplete v-model="formItem.UnitSales" @on-search="remoteMethod1" placeholder="销售单位" v-if="isSelect">
                                    <Option v-for="item in UnitSales" :value="item.UnitName" :key="item.UnitCode" @click.native="handleUnitSales(item)">
                                        <div style="display: flex;justify-content: space-between;">
                                            <span class="demo-auto-complete-title">{{ item.UnitName }}</span>
                                            <!-- <span class="demo-auto-complete-count">{{ item.UnitCode }}</span> -->
                                        </div>
                                    </Option>
                                </AutoComplete>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 2}">
                            <FormItem prop="ChargeUnit" label class="sss">
                                <AutoComplete v-model="formItem.ChargeUnitName" @on-search="remoteMethod111" placeholder="医保单位" v-if="isSelect">
                                    <Option v-for="item in ChargeUnit" :value="item.UnitName" :key="item.UnitCode" @click.native="handleChargeUnitName(item)">
                                        <div style="display: flex;justify-content: space-between;">
                                            <span class="demo-auto-complete-title">{{ item.UnitName }}</span>
                                            <span class="demo-auto-complete-count">{{ item.UnitCode }}</span>
                                        </div>
                                    </Option>
                                </AutoComplete>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 5}">
                            <FormItem label="换算关系" prop="UnitCount">
                                1{{unitData.Buy}} =
                                <i-input v-model="formItem.UnitCount" placeholder="请输入换算系数" style="width:60px"></i-input>
                                {{unitData.Sales}}
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 3}">
                            <FormItem label="单次剂量" prop="UnitDoseVal">
                                <i-input v-model="formItem.UnitDoseVal" placeholder="单次剂量"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 3}">
                            <FormItem label prop="UnitDoseName" class="aaa">
                                <dictionaries
                                    v-if="isAsyncSelect"
                                    :currentModel="formItem.UnitDoseName"
                                    @setDictionaries="setMethodsss"
                                    :name="'数量单位'"
                                    :value="'UnitDoseName'"
                                    isKey="false"
                                ></dictionaries>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="药品剂型" prop="Method">
                                <dictionaries
                                    v-if="isAsyncSelect"
                                    :currentModel="formItem.Method"
                                    @setDictionaries="setMethod"
                                    :name="'剂型'"
                                    :value="'Method'"
                                    isYBCode="true"
                                ></dictionaries>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 7}">
                            <FormItem label="给药途径">
                                <dictionaries
                                    v-if="isAsyncSelect"
                                    :currentModel="formItem.Usage"
                                    @setDictionaries="setMethodss"
                                    :name="'给药途径'"
                                    :value="'Usage'"
                                ></dictionaries>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="标准用法">
                                <dictionaries
                                    v-if="isAsyncSelect"
                                    :currentModel="formItem.Rate"
                                    @setDictionaries="setMethods"
                                    :name="'标准用法'"
                                    :value="'Rate'"
                                    isYBCode="true"
                                ></dictionaries>
                            </FormItem>
                        </i-col>
                        <!-- <i-col :lg="{ span: 5}">
                            <FormItem label="常用剂量">
                                <i-input v-model="formItem.UnitDoseVal" placeholder="请输入常用剂量"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="剂量单位">
                                <i-input v-model="formItem.UnitDoseName" placeholder="请输入单位剂量"></i-input>
                            </FormItem>
                        </i-col>-->

                        <i-col :lg="{ span: 6}">
                            <FormItem label="包装材料">
                                <i-input v-model="formItem.Package" placeholder="请输入包装材料"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="销售单价" prop="PriceUnit">
                                <i-input v-model="formItem.PriceUnit" placeholder="请输入销售单价" style="width:60px"></i-input>
                                <span>&nbsp;&nbsp;/&nbsp; {{unitData.Sales}}</span>
                            </FormItem>
                        </i-col>
                        <!-- <i-col :lg="{ span: 3}">
                            <FormItem label="服务分类" class="Service">
                                <RadioGroup v-model="formItem.IsService">
                                    <Radio label="false">否</Radio>
                                    <Radio label="true">是</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>-->
                    </Row>
                    <Row>
                        <p class="product-hr-title">编码信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="批准文号" prop="StdDocID">
                                <i-input v-model="formItem.StdDocID" placeholder="请输入批准文号"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="拼音码" prop="PinYinCode">
                                <i-input v-model="formItem.PinYinCode" placeholder="请输入拼音码"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 7}">
                            <FormItem label="条形码" prop="BarCode">
                                <i-input v-model="formItem.BarCode" placeholder="请输入条形码"></i-input>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 4}">
                            <FormItem label="厂家货号" prop="SupCode">
                                <i-input v-model="formItem.SupCode" placeholder="请输入厂家货号"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="药品本位码" prop="BenWeiCode">
                                <i-input v-model="formItem.BenWeiCode" placeholder="请输入药品本位码"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="收费目录代码">
                                <i-input v-model="formItem.DirCode" placeholder="请输入收费目录代码"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row></Row>
                    <Row>
                        <p class="product-hr-title">价格信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="原价" prop="PriceOld">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.PriceOld"
                                    class="style-input"
                                    placeholder="请输入原价"
                                />
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 6}">
                            <FormItem label="现价" prop="PriceNew">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.PriceNew"
                                    class="style-input"
                                    placeholder="请输入现价"
                                />
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 7}">
                            <FormItem label="积分兑换" prop="PayByPoint">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.PayByPoint"
                                    class="style-input"
                                    placeholder="兑换所需积分"
                                />
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="佣金" prop="Commission">
                                <input type="number" v-model="formItem.Commission" class="style-input" placeholder="请输入佣金" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="警戒库存" prop="StockWarn">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.StockWarn"
                                    class="style-input"
                                    placeholder="请输入警戒库存"
                                />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <p class="product-hr-title">内容信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="顶部轮播">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.PictureTop"
                                    @delImgList="delImgList"
                                    :multiple="true"
                                    :data="{directory:'OrgPath'}"
                                    :check="3"
                                    :value="'PictureTop'"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="列表图">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.PictureList"
                                    @delImgList="delImgList"
                                    :multiple="false"
                                    :data="{directory:'OrgPath'}"
                                    :value="'PictureList'"
                                    :check="1"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="小图">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.PictureSmall"
                                    @delImgList="delImgList"
                                    :multiple="false"
                                    :data="{directory:'OrgPath'}"
                                    :value="'PictureSmall'"
                                    :check="1"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="属性">
                                <RadioGroup v-model="formItem.IsVirtual">
                                    <Radio label="false">实物</Radio>
                                    <Radio label="true">虚拟</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="状态">
                                <RadioGroup v-model="formItem.State">
                                    <Radio label="1">上架</Radio>
                                    <Radio label="0">下架</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="内容">
                                <editor ref="editor" :value="content" @on-change="handleChange" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="顺序号" prop="ShowSort">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,12)"
                                    v-model="formItem.ShowSort"
                                    class="style-input"
                                    placeholder="请输入显示顺序"
                                />
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 6}">
                            <FormItem label="虚拟销量" prop="ShowCount">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,12)"
                                    v-model="formItem.ShowCount"
                                    class="style-input"
                                    placeholder="请输入虚拟销量"
                                />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="简述" prop="ShortDes">
                                <i-input type="textarea" v-model="formItem.ShortDes" placeholder="请输入简述"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="关键词" prop="KeyWords">
                                <i-input v-model="formItem.KeyWords" placeholder="请输入关键词"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 20}">
                            <FormItem>
                                <i-col :lg="{ span: 2}">
                                    <Button @click="closePage">取消</Button>
                                </i-col>
                                <i-col :lg="{ span: 2}">
                                    <Button type="primary" @click="handleSubmit('formItem')">提交</Button>
                                </i-col>
                                <i-col :lg="{ span:18}">
                                    <span style="float:right;color:red;">药品字典信息会影响到患者的医生处方的注射剂量，请谨慎确认！</span>
                                </i-col>
                                <i-col :lg="{ span:2}">
                                    <Button @click="handleSuccess('formItem')" style="float:right;background:#009688;color:white">我已确认</Button>
                                </i-col>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * 商品新建 编辑
 */
import { segmentation } from '@/util'
import ImgUpload from '@/components/ImgUpload'
import Editor from '@/components/Editor'
import Dictionaries from '@/components/Dictionaries'
import Api from './service'
import { setTimeout } from 'timers'

export default {
    name: 'ProductListJump',
    components: {
        ImgUpload,
        Editor,
        Dictionaries
    },
    data() {
        const validatorFactoryID = (rule, value, callback) => {
            setTimeout(() => {
                if (this.formItem.FactoryID == '' || !this.formItem.FactoryID) {
                    callback(new Error('请选择生产厂家'))
                } else {
                    callback()
                }
            }, 100)
        }
        const validatorMethod = (rule, value, callback) => {
            setTimeout(() => {
                if (this.formItem.Method == '' || !this.formItem.Method) {
                    callback(new Error('请选择药品剂型'))
                } else {
                    callback()
                }
            }, 100)
        }
        /* 商品分类校验 */
        const validatorCategoriesList = (rule, value, callback) => {
            if (this.categoriesListValue.length == 0) {
                callback(new Error('请选择商品分类'))
            } else {
                callback()
            }
        }
        return {
            content: '',
            Factoryloading: false,
            FactoryList: [],
            isImg: false,
            categoriesList: [],
            categoriesListValue: [],
            isAsyncSelect: false,
            unitData: {
                Buy: '',
                Sales: ''
            },
            imglist: {
                PictureTop: [],
                PictureList: [],
                PictureSmall: []
            },
            isSelect: false,
            imgDefaultList: {
                PictureTop: [],
                PictureList: [],
                PictureSmall: []
            },
            UnitSales: [],
            UnitBuy: [],
            ChargeUnit: [],
            formItem: this.initFormItem(),
            ruleValidate: {
                categoriesList: [
                    {
                        required: true,
                        validator: validatorCategoriesList,
                        message: '请选择不可为空',
                        trigger: 'change'
                    }
                ],
                FactoryID: [
                    {
                        required: true,
                        validator: validatorFactoryID
                    }
                ],
                Method: [
                    {
                        required: true,
                        validator: validatorMethod
                    }
                ],
                ProName: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShortName: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PriceOld: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PayByPoint: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PriceNew: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Commission: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitBuy: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ChargeUnit: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShelfLife: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitSales: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Spec: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Rate: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                StdDocID: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitDoseName: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitDoseVal: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                BarCode: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                SupCode: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PinYinCode: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShowSort: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PriceUnit: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                StockWarn: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShowCount: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitCount: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Dose: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    mounted() {
        this.changeContent('')
        this.remoteMethod1()
        this.remoteMethod11()
        this.remoteMethod111()
        const { id } = this.$route.params
        Api.getcategoriesList().then(res => {
            this.categoriesList = res.data
            Api.getAllFactory().then(res => {
                this.FactoryList = res.data
                if (id > 0) {
                    Api.getItemInfo({
                        id
                    }).then(res => {
                        this.formItem = {
                            ...res.data,
                            // Status: res.data.Status + '',
                            IsVirtual: res.data.IsVirtual + '',
                            State: res.data.State + '',
                            PriceOld: res.data.PriceOld + '',
                            PayByPoint: res.data.PayByPoint + '',
                            PriceNew: res.data.PriceNew + '',
                            Commission: res.data.Commission + '',
                            UnitCount: res.data.UnitCount + '',
                            PriceUnit: res.data.PriceUnit + '',
                            Method: res.data.Method + '',
                            ShelfLife: res.data.ShelfLife + '',
                            ShowSort: res.data.ShowSort + '',
                            StockWarn: res.data.StockWarn + '',
                            ShowCount: res.data.ShowCount + '',
                            IsService: res.data.IsService + '',
                            ChargeUnit: res.data.ChargeUnit + '',
                            ChargeUnitName: res.data.ChargeUnitName + '',
                            UnitDoseVal: res.data.UnitDoseVal + '',
                            UnitDoseName: res.data.UnitDoseName + '',
                            Rate: res.data.Rate + '',
                            Usage: res.data.Usage + ''
                        }
                        this.unitData = {
                            Buy: res.data.UnitBuy,
                            Sales: res.data.UnitSales
                        }
                        res.data.TypeOne &&
                            this.categoriesListValue.push(res.data.TypeOne)
                        res.data.TypeTwo &&
                            this.categoriesListValue.push(res.data.TypeTwo)
                        res.data.TypeThree &&
                            this.categoriesListValue.push(res.data.TypeThree)
                        this.isAsyncSelect = true
                        this.$refs.editor.setHtml(res.data.Detail)
                        this.setImgDefaultList(res)
                        this.isSelect = true
                    })
                } else {
                    this.isImg = true
                    this.isAsyncSelect = true
                    this.isSelect = true
                    this.formItem = this.initFormItem()
                }
            })
        })
    },
    methods: {
        //确认
        handleSuccess() {
            Api.AffProduct({
                PID: this.formItem.ID
            }).then(res => {
                if (res.state == 'success') {
                    this.$Message.success('操作成功')
                    this.$router.go(-1)
                } else {
                    this.$Message.error(res.message)
                }
            })
        },
        handleUnitSales(item) {
            this.unitData.Sales = item.UnitName
        },
        handleUnitBuy(item) {
            this.unitData.Buy = item.UnitName
        },
        handleChargeUnitName(item) {
            this.formItem.ChargeUnit = item.UnitCode
        },
        setMethod(item, value, data) {
            this.formItem[value] = item
            this.formItem.MethodCode = data.YBCode
        },
        setMethods(item, value, data) {
            this.formItem.Rate = item
            this.formItem.RateCode = data.YBCode
            
        },
        setMethodss(item) {
            this.formItem.Usage = item
        },
        setMethodsss(item, value, data) {
            this.formItem.UnitDoseName = data.Dname
        },
        /* 关闭页面 */
        closePage() {
            this.$router.go(-1)
        },
        /* 改变富文本 */
        changeContent(data) {
            this.$refs.editor.setHtml(data)
        },
        /* 富文本改变 */
        handleChange(html) {
            this.formItem.Detail = html
        },
        /* 图片上传 */
        setImgLIst(list, value) {
            this.imglist[value] = list
        },
        /* 图片删除 */
        delImgList(list, value) {
            this.imglist[value] = list
        },
        remoteMethod1(query) {
            Api.getUnitSales({ keyword: query }).then(res => {
                this.UnitSales = res.data
            })
        },
        remoteMethod11(query) {
            Api.getUnitSales({ keyword: query }).then(res => {
                this.UnitBuy = res.data
            })
        },
        remoteMethod111(query) {
            Api.getUnitSales({ keyword: query }).then(res => {
                this.ChargeUnit = res.data
            })
        },
        remoteMethod(query) {
            Api.getAllFactory().then(res => {
                this.FactoryList = res.data
            })
            if (query !== '') {
                this.Factoryloading = true
                setTimeout(() => {
                    this.Factoryloading = false
                    this.FactoryList = this.FactoryList.filter(
                        item =>
                            item.SupplierName.toLowerCase().indexOf(
                                query.toLowerCase()
                            ) > -1
                    )
                }, 200)
            } else {
                this.FactoryList = []
            }
        },
        /* 供应商选择 */
        setDictionaries(item, value) {
            this.formItem[value] = item.ID + ' '
        },
        /* 设置图片 */
        async setImgDefaultList(res) {
            if (res.data.PictureTop && res.data.PictureTop.length > 0) {
                const PictureTop = res.data.PictureTop.split(',')
                for (let item in PictureTop) {
                    this.imgDefaultList.PictureTop.push({
                        url: PictureTop[item]
                    })
                    this.imglist.PictureTop.push({
                        url: PictureTop[item]
                    })
                }
            }
            if (res.data.PictureList && res.data.PictureList.length > 0) {
                this.imgDefaultList.PictureList.push({
                    url: res.data.PictureList
                })
                this.imglist.PictureList.push({ url: res.data.PictureList })
            }
            if (res.data.PictureSmall && res.data.PictureSmall.length > 0) {
                this.imgDefaultList.PictureSmall.push({
                    url: res.data.PictureSmall
                })
                this.imglist.PictureSmall.push({ url: res.data.PictureSmall })
            }
            this.isImg = true
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                this.formItem = {
                    ...this.formItem,
                    PictureTop: [],
                    PictureSmall: [],
                    PictureList: []
                }
                const { PictureTop, PictureSmall, PictureList } = this.imglist
                for (let item in PictureTop) {
                    this.formItem.PictureTop.push(PictureTop[item].url)
                }
                for (let item in PictureSmall) {
                    this.formItem.PictureSmall.push(PictureSmall[item].url)
                }
                for (let item in this.imglist.PictureList) {
                    this.formItem.PictureList.push(PictureList[item].url)
                }
                let data = {
                    ...this.formItem,
                    PictureTop: segmentation(this.formItem.PictureTop),
                    PictureSmall: segmentation(this.formItem.PictureSmall),
                    PictureList: segmentation(this.formItem.PictureList),
                    comid: JSON.parse(sessionStorage.getItem('user')).comid,
                    TypeOne: this.categoriesListValue[0]
                        ? this.categoriesListValue[0]
                        : null,
                    TypeTwo: this.categoriesListValue[1]
                        ? this.categoriesListValue[1]
                        : null,
                    TypeThree: this.categoriesListValue[2]
                        ? this.categoriesListValue[2]
                        : null
                }
                if (valid) {
                    
                    Api.addTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功')
                            this.$router.go(-1)
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
                }
            })
        },
        /* 表单数据 */
        initFormItem() {
            return {
                ShortName: '',
                BarCode: '',
                BenWeiCode: '',
                PriceOld: '0',
                UnitBuy: '',
                UnitSales: '',
                PriceNew: '0',
                PayByPoint: '0',
                Commission: '0',
                Spec: '',
                ShelfLife: null,
                StockWarn: '0',
                PictureTop: [],
                Detail: '',
                SupCode: null,
                PictureList: [],
                PictureSmall: [],
                ShowCount: '0',
                ShowSort: '0',
                PriceUnit: '1',
                IsVirtual: 'false',
                State: '1',
                ShortDes: '',
                Dose: '',
                Rate: '',
                UnitCount: '1',
                StdDocID: '',
                UnitDoseName: '',
                UnitDoseVal: '',
                PinYinCode: '',
                KeyWords: '',
                ProName: '',
                Usage: '',
                IsService: 'false',
                ChargeUnit: '',
                ChargeUnitName: '',
                MethodCode: '',
                RateCode: ''
            }
        }
    }
}
</script>

<style>
</style>

<style lang="less" scoped>
.wrap-card {
    height: 80vh;
    overflow-y: scroll;
    padding: 20px;
}
.wrap-card::-webkit-scrollbar {
    width: 0 !important;
}
.wrap-card {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.product-hr {
    background: #959595;
    height: 1px;
    margin: 10px 0;
}
.product-hr-title {
    color: #aaaaaa;
    font-size: 15px;
}
.demo-auto-complete-item {
    padding: 5px 10px;
}
</style>
<style scoped>
.aaa >>> .ivu-form-item-content {
    margin-left: 5px !important;
}
.sss >>> .ivu-form-item-content {
    margin-left: 5px !important;
}
.Service >>> .ivu-form-item-label {
    width: 60px !important;
}
.Service >>> .ivu-form-item-content {
    margin-left: 70px !important;
}
</style> 
